<template>
<div>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="地区名称">
      <el-input v-model="formInline.name" placeholder="地区名称"></el-input>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="init">查询</el-button>
      <el-button type="primary" @click="adds">添加</el-button>
      <el-button type="primary" @click="DistrictEchar">柱型统计</el-button>
      <el-button type="primary" @click="DistrictEcharS">扇形统计</el-button>
      <el-button type="primary" @click="DistrictEcharSS">折线图统计</el-button>
      <el-button type="primary" @click="ExcelDist">excel导出</el-button>
    </el-form-item>
  </el-form>


  <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :default-expand-all="false"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

<!--    <el-table-column-->
<!--        prop="id"-->
<!--        label="地区主键编号"-->
<!--        sortable-->
<!--        width="180">-->
<!--    </el-table-column>-->

    <el-table-column
        prop="name"
        label="地区名称">
    </el-table-column>
    <el-table-column
        prop="code"
        label="行政代码"
        sortable
        width="180">
    </el-table-column>


<!--    <el-table-column-->
<!--        prop="parentId"-->
<!--        label="地区父id">-->
<!--    </el-table-column>-->

    <el-table-column
        prop="firstLetter"
        label="首字母">
    </el-table-column>
    <el-table-column
        prop="status"
        label="地区状态">
      <template v-slot="pp">
        <el-switch
            v-model="pp.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="outStatus(pp.row)"
            active-value="0"
            inactive-value="1">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
        prop="level"
        label="地区级别">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="updates(scope.row)" type="info" size="small">修改</el-button>
        <el-button @click="deleted(scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="添加页面" :visible.sync="dialogFormVisible">
    <el-form :model="form">
<!--      <el-form-item label="地区主键编号" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.id" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="行政代码" :label-width="formLabelWidth">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.areaname" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="所属上级级别" prop="resource" :label-width="formLabelWidth">
        <el-radio-group v-model="form.level">
          <el-radio label="0" >省</el-radio>
          <el-radio label="1" >市</el-radio>
          <el-radio label="2" >区</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属上级(省/市/区)" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
<!--      <el-form-item label="地区名称" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.name" autocomplete="off"></el-input>-->

<!--        &lt;!&ndash;        <div class="block">&ndash;&gt;-->

<!--&lt;!&ndash;          <el-cascader&ndash;&gt;-->
<!--&lt;!&ndash;              v-model="value"&ndash;&gt;-->
<!--&lt;!&ndash;              :options="options"&ndash;&gt;-->
<!--&lt;!&ndash;              :props="{ expandTrigger: 'hover' ,label:'name',value:'id'}"&ndash;&gt;-->
<!--&lt;!&ndash;              @change="handleChange"></el-cascader>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--      </el-form-item>-->
<!--      <el-form-item label="地区父id" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.parentId" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="首字母" :label-width="formLabelWidth">
        <el-input v-model="form.firstLetter" autocomplete="off"></el-input>
      </el-form-item>
<!--      <el-form-item label="地区级别" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.level" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

    </el-form>
    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="Adds">添加</el-button>
    </div>
  </el-dialog>

  <el-dialog title="修改页面" :visible.sync="dialogFormVisible1">
    <el-form :model="form1">
<!--      <el-form-item label="地区主键编号" :label-width="formLabelWidth1">-->
<!--        <el-input v-model="form1.id" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="行政代码" :label-width="formLabelWidth1">
        <el-input v-model="form1.code" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="地区名称" :label-width="formLabelWidth1">
        <el-input v-model="form1.name" autocomplete="off"></el-input>
      </el-form-item>

<!--      <el-form-item label="地区父id" :label-width="formLabelWidth1">-->
<!--        <el-input v-model="form1.parentId" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="首字母" :label-width="formLabelWidth1">
        <el-input v-model="form1.firstLetter" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="地区级别" :label-width="formLabelWidth1">
        <el-input v-model="form1.level" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="updateDistrict">修改</el-button>
    </div>

  </el-dialog>

  <div id="main" style="height: 500px; width: 500px;">

  </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import axios from "axios";
export default {
  name: "DistrictView",
  data(){
    return{
      formInline:{
        name:null,
      },
      tableData:[],

      dialogFormVisible:false,
      form:{

      },
      formLabelWidth:'120px',

      dialogFormVisible1:false,
      form1:{},
      formLabelWidth1:'120px',
      value:[],
      options:[],

      x:[],
      y:[],
      a:[],
      x1:[],
      y1:[],

    }

  },
  methods:{

    ExcelDist(){
      this.axios.post("http://localhost:8004/district/export",this.formInline).then(res=>{
        this.$message.success("导出成功");
      })
    },
    outStatus(pp){
      this.axios.post("http://localhost:8004/district/statusDistrict",pp).then(res=>{
        this.$message.success(res.data.data);
        this.init();
      })
    },

    DistrictEcharSS(){
      this.axios.get("http://localhost:8004/district/levelDistrict").then(res=>{
        if (res.data.code==200){
          this.x1=res.data.x1;
          this.y1=res.data.y1;
          this.aaa();
        }
      })
    },
    aaa(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: this.x1
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.y1,
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);

    },

    DistrictEcharS(){
      this.axios.get("http://localhost:8004/district/echarFirstLetter").then(res=>{
          this.a=res.data
          this.fiststory();

      })
    },
    fiststory(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;


      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.a,
          }
        ]
      };

      option && myChart.setOption(option);

    },

    DistrictEchar(){
        this.axios.get("http://localhost:8004/district/excharDistrict").then(res=>{
          if (res.data.code==200){
            this.x=res.data.x;
            this.y=res.data.y;
            this.Echarts();
          }
        })
    },
    Echarts(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: this.x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.y,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);
    },

    handleChange(){
    },
    updates(row){
      this.dialogFormVisible1=true;
      this.form1=row;
    },
    updateDistrict(){
      this.axios.post("http://localhost:8004/district/updates",this.form1).then(res=>{
        if (res.data==true){
          this.$message.success("修改成功");
          this.init();
          this.dialogFormVisible1=false;
        }else {
          this.$message.error("修改成功");
        }
      })
    },

    deleted(row){
      this.axios.get("http://localhost:8004/district/deletes?id="+row.id).then(res=>{
        if (res.data==true){
          this.$message.success("删除成功");
          this.init();
        }else {
          this.$message.error("删除失败");
        }
      })
    },

    adds(){
      this.init();
      this.dialogFormVisible=true;
    },
    Adds(){
      this.axios.post("http://localhost:8004/district/adds",this.form).then(res=>{
        if (res.data==true){
          this.$message.success("添加成功");
          this.init();
          this.dialogFormVisible=false;
        }else {
          this.$message.error("添加失败");
        }
      })
    },
    init(){
      this.axios.post("http://localhost:8004/district/lists",{name:this.formInline.name}).then(res=>{
        this.tableData=res.data;
        this.options=res.data

      })
    }
  },
  created() {
    this.init();

  }
}
</script>

<style scoped>

</style>